<template>
  <div>
    <h1>首页</h1>
    <ul class="u1">
      <li class="yellow">
        <h2>{{ orderCount }}</h2>
        <p>用户总数</p>
      </li>
      <li class="green">
        <h2>{{ productCount }}</h2>
        <p>商品总数</p>
      </li>
      <li class="blue">
        <h2>{{ userCount }}</h2>
        <p>订单总数</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderCount: "",
      productCount: "",
      userCount: "",
    };
  },
  created() {
    this.$axios({ url: "/statistic/base_count.do", method: "post" }).then(
      (res) => {
        console.log(res);
        this.orderCount = res.data.data.orderCount;
        this.productCount = res.data.data.productCount;
        this.userCount = res.data.data.userCount;
      }
    );
  },
};
</script>

<style lang="scss" scoped>
h1 {
  text-align: left;
  line-height: 100px;
  font-size: 30px;
  width: 200px;
  text-align: center;
}
.u1 {
  display: flex;
  justify-content: space-around;
  width: 100%;
  li {
    flex-basis: 30%;
    height: 100px;
    color: white;
    padding: 20px 0;
    h2{
      font-size: 30px;
      line-height: 50px;
    }
    p{
      line-height: 30px;
    }
  }
  li:hover{
    flex-basis: 33%;
    height: 120px;
    color: #000;
  }
}
.yellow{
  background: rgb(248, 161, 0);
}
.blue{
  background: rgb(24, 215, 248);
}
.green{
  background: rgb(166, 243, 23);
}
</style>